<template>
  <SelectWithUserLoad
    ref="selectUser"
    v-model="computedValue"
    :default-list="defaultValue"
    :hide-select-list="defaultValue"
    :multiple="element.options.isMultiple"
    :loadmore-method="queryAllPost()"
    :placeholder="element.options.placeholder || '请选择'"
    :disabled="element.options.disabled && !isInDetail"
    :style="{width: width + 'px'}"
    visible-change-data
    value-type="object"
    extend-class="create-ip-order-select"
    key-name="id"
    label-name="name"
    filterable
    clearable
    collapse-tags
  />
</template>

<script>
import { getAllPost } from '@/api/user';
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';

export default {
  components: { SelectWithUserLoad },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: Object | Array | String | Number,
      default: null
    },
    element: {
      type: Object,
      default: () => ({})
    },
    isPreView: { // 是否配置中
      type: Boolean,
      default: false
    },
    isInDetail: { // 是否详情页展示，isDetail可能因为事件而改变，导致实际在详情页而 isDetail 为false，这个属性不会改变，详情页永远为true
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 240
    }
  },
  data() {
    return {
      postList: []
    };
  },
  computed: {
    computedValue: {
      get() {
        return this.isEmptyVal(this.value) ? null : this.value;
      },
      set(val) {
        this.$emit('changeValue', val);
      }
    },
    defaultValue() {
      const value = this.computedValue;
      if (!value) return [];
      if (Array.isArray(value)) {
        return value;
      }
      return [value];
    }
  },
  watch: {
    'element.options.isMultiple': {
      handler(val) {
        this.initValue(val);
      },
      deep: true
    }
  },
  created() {
    // this.queryAllPost();
  },
  methods: {
    isEmptyVal(val) {
      return JSON.stringify(val) === '{}' || (!val && val !== 0) || (Array.isArray(val) && !val.length);
    },
    initValue(multiple) {
      if (!this.isPreView) return;
      let val = this.computedValue;
      let value = multiple ? [] : '';
      if (val && ((Array.isArray(val) && val.length) || val.id)) {
        val = Array.isArray(val) ? val[0] : val;
        if (Array.isArray(value)) {
          value.push(val);
        } else {
          value = val;
        }
      }
      this.$set(this.element, 'value', value);
    },
    queryAllPost() {
      const that = this;
      return function(params) {
        return new Promise((resolve, reject) => {
          if (params.userName) params.name = params.userName;
          const postDataCache = that.$store.getters.postList;
          if (params.page === 1 && !params.name && postDataCache && postDataCache.data.items) {
            resolve(postDataCache);
            return;
          }
          getAllPost(params).then(res => {
            if (res.data && res.data.items) {
              res.data.items = res.data.items.map(name => ({ id: name, name }));
              if (params.page === 1 && !params.name) that.$store.commit('SET_POSTLIST', res);
            }
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
